<template>
  <view class="view-content">
    <view>
      <!-- <u-swiper :list="list" @change="(e) => (current = e.current)" keyName="imageUrl">
        <view slot="indicator" class="indicator">
          <view class="indicator__dot" v-for="(item, index) in list" :key="index" :class="[index === current && 'indicator__dot--active']">
          </view>
        </view>
      </u-swiper> -->
      <image style="width:100%;height:260rpx;border-radius:10rpx" src="@/static/images/banner.jpg" />

      <view>
        <view class="circle-box">
          <!-- v-model:current="modelVale" -->
          <l-circle v-model:current="modelVale" :percent="target" :strokeColor="['#21A3BD', '#27AB9C']" :duration="300" size="190px" :strokeWidth="16" :trailWidth="16" lineCap="butt" :clockwise="false">
          </l-circle>
          <view class="circle" v-if="showCircle">
            <view class="circle-title">{{ stepMsg.title }}</view>
            <view class="time">
              <text class="time__item">剩余{{ formatTime }}</text>
            </view>
          </view>
          <view v-else class="complete-box">
            <image v-if="status == 'success'" class="icon" src="@/static/images/gou.png" />
            <view> {{ stepMsg.completeTitle }} </view>
          </view>
        </view>
        <view v-if="step == 1">
          <!-- <view @click="startUse(30)">模拟点击设备启动</view> -->
          <view class="tip-title">消毒注意事项</view>
          <view class="tip-msg">消毒注意事项消毒注意事项消毒注意事项消毒注意事项消毒注意事项消毒注意事项消毒注意事项</view>
        </view>
        <view v-else>
          <view class="card-item">
            <image class="lf-icon" src="@/static/images/taocan-sel.png" />
            <view class="msg">
              <view class="head">
                <view class="name">{{
                  detail.packageName 
                }}</view>
                <view class="duration">{{ detail.time  }}分钟</view>
              </view>
              <view class="intro">{{
                detail.content 
              }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn" v-if="completeOrder" @tap="toMine">确认</view>
    </view>
  </view>
</template>

<script>
export default {
  options: {
    styleIsolation: "shared",
  },
};
</script>

<script setup>
import { postBannerList, postOrderDetail } from "@/api/common/index";
import { useAppStore } from "@/store";
import { getToken } from "@/utils/auth";
const storeApp = useAppStore();
//导入websocket类
import _WebSocket from "@/utils/socket";
import { getTime } from "@/utils/index";
//实例化websocket对象
const websocket = new _WebSocket();

const list = ref([{
  imageUrl: "@/static/images/banner.jpg",
}]);
const detail = ref({});
const orderId = ref("");
const responseTimer = ref(null);

const startOrder = computed(() => {
  return storeApp.startOrder;
});
const completeOrder = computed(() => {
  return storeApp.completeOrder;
});
const timeData = computed(() => {
  return storeApp.timeData;
});
const allTime = computed(() => {
  return storeApp.allTime;
});
const currentTime = computed(() => {
  return storeApp.currentTime;
});
const step = computed(() => {
  return storeApp.step;
});
const modelVale = ref(0);
watch(() => {
  modelVale.value = storeApp.modelVale;
});
const target = computed(() => {
  return storeApp.target;
});
const status = computed(() => {
  return storeApp.status;
});
const statusText = computed(() => {
  return storeApp.statusText;
});

const showCircle = computed(() => {
  return target.value < 100 && !completeOrder.value;
});
const formatTime = computed(() => {
  console.log('currentTime.value------', currentTime.value);
  console.log('格式化时间------', getTime(currentTime.value));
  return getTime(currentTime.value);
});
const stepMsg = computed(() => {
  if (step.value == 1) {
    return {
      title: "消毒中",
      completeTitle: statusText.value,
    };
  } else {
    return {
      title: detail.value.packageName + "洗发中",
      completeTitle: statusText.value,
    };
  }
});
let isRequesting = false
let xdTimer = null;
let xtTimer = null;
// 防止定时结束后状态未改变
// watch(() => [target.value],
//   async () => {
//     console.log('触发多次监听吗');
//     let useStatus = detail.value?.useStatus;
//     if (target.value == 100 && (detail.value?.status != 1 && detail.value?.status != 2)) {
//       if (useStatus == 0) {
//         console.log('进入消毒状态');
//         const { startDisinfect, startTime, time, disinfectTime } = detail.value;
//         const currentTime1 = Number(new Date().getTime()); // 当前时间戳
//         const _startTime = Number(new Date(startDisinfect).getTime()); // xd开始时间戳
//         const useTime = Math.floor((currentTime1 - _startTime) / 1000); // 使用时间
//         if (useTime > disinfectTime + 10) {
//           await getPackageDetail();
//         }

//         if (!xdTimer) {
//           xdTimer = setInterval(async () => {
//             console.log('进入消毒定时器');
//             if (detail.value?.useStatus != 0 || (detail.value?.status == 1 || detail.value?.status == 2)) {
//               clearInterval(xdTimer);
//               xdTimer = null;
//             } else {
//               if (!isRequesting) {
//                 isRequesting = true;
//                 await getPackageDetail();
//                 isRequesting = false;
//               }
//             }
//           }, 2000);
//         }
//       } else if (useStatus == 1) {
//         const { startDisinfect, startTime, time, endTime, status } = detail.value;
//         const currentTime2 = Number(new Date().getTime()); // 当前时间戳
//         const _startTime = Number(new Date(startDisinfect).getTime()); // xt开始时间戳
//         const useTime = Math.floor((currentTime2 - _startTime) / 1000); // 使用时间
//         if (useTime > time * 60 + 10) {
//           await getPackageDetail();
//         }
//         // let timer = null;
//         // let isRequesting = false;
//         if (!xtTimer) {
//           console.log('进入洗头定时器');
//           xtTimer = setInterval(async () => {
//             if (detail.value?.useStatus == 1 && detail.value?.endTime || (detail.value?.status == 1 || detail.value?.status == 2)) {
//               clearInterval(xtTimer);
//               xtTimer = null;
//             } else {
//               if (!isRequesting) {
//                 isRequesting = true;
//                 await getPackageDetail();
//                 isRequesting = false;
//               }
//             }
//           }, 2000);
//         }

//       }
//     }
//   },
//   { deep: true }
// );


function init() {
  // /**
  //  * 开机成功，开始消毒
  //  */
  // TURN_ON_SUCCESS(0, "开机成功，开始消毒"),
  //   /**
  //    * 开机失败，设备异常，订单异常结束
  //    */
  //   TURN_ON_ERROR(1, "开机失败，订单异常结束"),
  //   /**
  //    * 消毒完成，开始洗头
  //    */
  //   START_WASH_HAIR(2, "消毒完成，开始洗头"),
  //   /**
  //    * 开始洗头后，设备异常，订单异常结束
  //    */
  //   DEVICE_ABNORMAL_ORDER_OVER(3, " 开始洗头后，设备异常，订单异常结束"),
  //   /**
  //    * 开始洗头后，订单异常结束
  //    */
  //   ORDER_ABNORMAL_OVER(4, "开始洗头后，订单异常结束"),
  //   /**
  //    * 开始洗头后，订单正常结束
  //    */
  //   ORDER_OVER(5, "开始洗头后，订单正常结束");
  try {
    const that = this;
    const token = getToken()
    websocket.connectSocket(
      {
        token,
      }, //可以传递额外的参数
      null,
      () => {
        //出错的回调,重新建立连接
      },
      async (res) => {
        // 接收到得消息
        const data = JSON.parse(res.data);
        if (data.code == 1) {
          const { msgType, msgTypeDesc } = data.message;
          console.log("msgType", msgType);
          // uni.showToast({
          //   icon: "none",
          //   title: msgTypeDesc,
          // });
          // if (msgType == 0) {
          //   // 开机成功，开始消毒
          //   getPackageDetail();
          // } else if (msgType == 1) {
          //   // 开机失败，订单异常结束
          //   storeApp.setProgress({
          //     step: 1,
          //     currentTime: 0,
          //     modelVale: 100,
          //     startOrder: false,
          //     completeOrder: true,
          //     status: "fail",
          //     statusText: "订单异常",
          //   });
          // } else
          if (msgType == 1) {
            console.log("洗头了");
            // 消毒完成，开始洗头
            await getUpdateDetail();
          } else if ([2, 3].includes(msgType)) {
            storeApp.setProgress({
              currentTime: 0,
              modelVale: 100,
              target: 100,
              startOrder: false,
              completeOrder: true,
              status: "fail",
              statusText: "订单异常",
            });
            uni.showToast({
              icon: "none",
              title: "订单异常",
            });
          } else if (msgType == 4) {
            console.log("洗完头了");
            await getUpdateDetail();
            const { time } = detail.value;
            const packageTime = time * 60;
            storeApp.setProgress({
              startOrder: false,
              completeOrder: true,
              step: 2, // 第一步
              allTime: packageTime, // 总时间this.detail.time
              currentTime: 0, // 当前剩余时间this.detail.time
              modelVale: 100, // 当前进度值
              target: 100, // 当前进度环
              status: "success",
              statusText: "洗发完成",
            });
          }
        }
      },
      () => {
        // 关闭了就重新连接
        // if (that.yNremind) {
        //   return;
        // }
        websocket.cloase(); // 关闭当前websoket
      }
    );
  } catch (error) {
    // console.log('live socket err:' + error);
  }
}
// 跳广告链接
// function jumpUrl(index) {
//   const item = list.value[index];
//   console.log("item", item);
//   uni.navigateTo({
//     url: "/pagesHome/webview?url=" + item.linkUrl,
//     // page.json定义的路径 传url 到webview界面去接收 实现跳转
//   });
// }
const isEnd = ref(false)


const testTimer = ref(null)
const isTest = ref(false)
// const testXt = (testStartDisinfect, useTime) => {
//   if (!testTimer.value && !isTest.value) {
//     isTest.value = true
//     let testStartTime = Math.floor((testStartDisinfect + (useTime + 5) * 1000) / 1000);
//     testTimer.value = setTimeout(() => {
//       const { startDisinfect, startTime, time, useStatus, disinfectTime, status } = {
//         "id": "1862672677817909249", "status": 0, "disinfectTime": 60, "useStatus": 1, "startDisinfect": testStartDisinfect, "endDisinfect": "2024-11-30 09:44:46", "startTime": testStartTime, "endTime": "2024-11-30 09:52:01", "time": 7, "packageName": "快洗", "content": "适合短发"
//       };
//       clearTimeout(testTimer.value)
//       getPackageDetail()
//     }, useTime)
//   }
// }

function addSecondsToDate(dateString, time) {
  // Parse the input date string.  Handles various formats.  Error handling would be good in production code.
  const date = new Date(dateString);

  // Check for parsing errors.
  if (isNaN(date.getTime())) {
    return "Invalid date format";
  }

  // Add the seconds.  getTime() returns milliseconds, so we multiply seconds by 1000.
  date.setSeconds(date.getSeconds() + time);

  // Format the date as YYYY-MM-DD HH:mm:ss.  You can customize this.
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 套餐详情
function getPackageDetail() {
  return new Promise((resolve) => {
    postOrderDetail({ id: orderId.value }).then((data) => {
      detail.value = data;
      const { startDisinfect, startTime, time, useStatus, disinfectTime, status } = detail.value;
      // 测试使用
      // let testStartDisinfect = "2024-11-30 21:55:30"
      // let testStartTime = addSecondsToDate(testStartDisinfect, 15);
      // 消毒
      // detail.value = {
      //   "id": "1862672677817909249", "status": 0, "disinfectTime": 10, "useStatus": 0, "startDisinfect": testStartDisinfect, "endDisinfect": "2024-11-30 09:44:46", "startTime": "2024-11-30 09:44:46", "endTime": "2024-11-30 09:52:01", "time": 7, "packageName": "快洗", "content": "适合短发"
      // };
      // let { startDisinfect, startTime, time, useStatus, disinfectTime, status } = detail.value
      // 洗头
      // detail.value = {
      //   "id": "1862672677817909249", "status": 0, "disinfectTime": 10, "useStatus": 1, "startDisinfect": testStartDisinfect, "endDisinfect": "2024-11-30 09:44:46", "startTime": testStartTime, "endTime": "2024-11-30 09:52:01", "time": 1, "packageName": "快洗", "content": "适合短发"
      // };
      // let { startDisinfect, startTime, time, useStatus, disinfectTime, status } = detail.value

      // let testCurrentTime = Number(new Date().getTime());
      // if (!testTimer.value && !isTest.value) {
      //   isTest.value = true
      //    testStartTime = addSecondsToDate(testStartDisinfect, 15);
      //   let timeoutEr = 15;
      //   console.log('testStartTime---', testStartTime);
      //   testTimer.value = setTimeout(() => {
      //     console.log('进入定时器');
      //     // const { startDisinfect, startTime, time, useStatus, disinfectTime, status } = {
      //     const obj = {
      //       "id": "1862672677817909249", "status": 0, "disinfectTime": 10, "useStatus": 1, "startDisinfect": testStartDisinfect, "endDisinfect": "2024-11-30 09:44:46", "startTime": testStartTime, "endTime": "2024-11-30 09:52:01", "time": 7, "packageName": "快洗", "content": "适合短发"
      //     };
      //     startDisinfect = obj.startDisinfect
      //     startTime = obj.startTime
      //     time = obj.time
      //     useStatus = obj.useStatus
      //     disinfectTime = obj.disinfectTime
      //     status = obj.status
      //     clearTimeout(testTimer.value)
      //     getPackageDetail()
      //   }, timeoutEr * 1000)
      // }
      // 测试使用

      if (!useStatus && useStatus !== 0) {
        uni.showLoading({
          title: "开机中...",
          mask: true,
        });
        let refreshTimer = setTimeout(async () => {
          await getPackageDetail();
          if ([0, 1].includes(detail.value.useStatus)) {
            clearTimeout(refreshTimer);
            refreshTimer = null;
          }
        }, 10000);
        return;
      }

      console.log("调取接口", detail.value);
      uni.hideLoading();


      // 订单结束
      if (status == 1 || status == 2) {
        uni.showToast({
          icon: "none",
          title: "订单已结束",
        });
        storeApp.setProgress({
          startOrder: false,
          completeOrder: true,
          step: 2, // 第一步
          allTime: time * 60, // 总时间this.detail.time
          currentTime: 0, // 当前剩余时间this.detail.time
          modelVale: 100, // 当前进度值
          target: 100, // 当前进度环
          status: "success",
          statusText: "洗发完成",
        });
        return
      }




      if (useStatus == 0) {
        // 当前状态消毒
        const currentTime1 = Number(new Date().getTime()); // 当前时间戳
        const _startTime = Number(new Date(startDisinfect).getTime()); // 开始时间戳
        const useTime = Math.floor((currentTime1 - _startTime) / 1000); // 使用时间
        const residueTime = disinfectTime - useTime; // 剩余时间
        const percent = (useTime / disinfectTime) * 100; // 使用时间占比
        if (useTime >= disinfectTime) {
          storeApp.setProgress({
            completeOrder: false,
            startOrder: true, // 开始订单
            step: 1, // 第一步
            allTime: disinfectTime, // 总时间this.detail.time
            currentTime: 0, // 当前剩余时间this.detail.time
            modelVale: 100, // 当前进度值
            target: 100, // 当前进度环
            status: "success",
            statusText: "消毒完成",
          });
        } else {
          console.log('消毒剩余时间', disinfectTime);
          storeApp.setProgress({
            completeOrder: false,
            startOrder: true, // 开始订单
            step: 1, // 第一步
            allTime: disinfectTime, // 总时间this.detail.time
            currentTime: residueTime, // 当前剩余时间this.detail.time
            modelVale: percent, // 当前进度值
            target: percent, // 当前进度环
            status: "loading",
            statusText: "消毒中",
          });
          let timer = setInterval(() => {
            storeApp.setProgress({
              currentTime: currentTime.value - 1,
            });
            console.log('消毒剩余时间currentTime.value', currentTime.value);
            computedTime();
            if (currentTime.value == 0) {
              // 消毒完成
              storeApp.setProgress({
                startOrder: true, // 开始订单
                completeOrder: false,
                step: 1, // 第一步
                allTime: disinfectTime, // 总时间this.detail.time
                currentTime: 0, // 当前剩余时间this.detail.time
                modelVale: 100, // 当前进度值
                target: 100, // 当前进度环
                status: "success",
                statusText: "消毒完成",
              });
              // 更新订单状态
              updateStatus()
              clearInterval(timer);
              timer = null;
            }
          }, 1000);
          storeApp.setTimer(timer);
        }
      } else if (useStatus == 1) {
        // 当前状态洗头
        const currentTime1 = Number(new Date().getTime());
        const _startTime = Number(new Date(startTime).getTime());
        const packageTime = time * 60;
        const useTime = Math.floor((currentTime1 - _startTime) / 1000);
        const residueTime = packageTime - useTime;
        const percent = (useTime / packageTime) * 100;
        if (useTime >= packageTime) {
          storeApp.setProgress({
            startOrder: false,
            completeOrder: true,
            step: 2, // 第一步
            allTime: packageTime, // 总时间this.detail.time
            currentTime: 0, // 当前剩余时间this.detail.time
            modelVale: 100, // 当前进度值
            target: 100, // 当前进度环
            status: "success",
            statusText: "洗发完成",
          });
        } else {
          storeApp.setProgress({
            startOrder: true, // 开始订单
            step: 2, // 第一步
            completeOrder: false,
            allTime: packageTime, // 总时间this.detail.time
            currentTime: residueTime, // 当前剩余时间this.detail.time
            modelVale: percent, // 当前进度值
            target: percent, // 当前进度环
            status: "loading",
            statusText: "洗头中",
          });
          let timer = setInterval(() => {
            let curTime = currentTime.value - 1;
            storeApp.setProgress({
              currentTime: curTime,
            });
            computedTime();
            if (step.value == 2 && currentTime.value == 0) {
              storeApp.setProgress({
                startOrder: false,
                completeOrder: true,
                step: 2, // 第一步
                allTime: packageTime, // 总时间this.detail.time
                currentTime: 0, // 当前剩余时间this.detail.time
                modelVale: 100, // 当前进度值
                target: 100, // 当前进度环
                status: "success",
                statusText: "洗发完成",
              });
              // 更新订单状态
              updateStatus()
              clearInterval(timer);
              timer = null;
            }
          }, 1000);
          storeApp.setTimer(timer);
        }
      }

      resolve();
    });
  });
}



function getUpdateDetail() {
  console.log('getUpdateDetail---orderId.value--++',orderId.value);
  postOrderDetail({ id: orderId.value }).then((data) => {
    detail.value = data;
    const { startDisinfect, startTime, time,secTime, useStatus, disinfectTime, status } = detail.value;
    if (useStatus == 0) {
      // 当前状态消毒
      const currentTime1 = Number(new Date().getTime()); // 当前时间戳
      const _startTime = Number(new Date(startDisinfect).getTime()); // 开始时间戳
      const useTime = Math.floor((currentTime1 - _startTime) / 1000); // 使用时间
      const residueTime = disinfectTime - useTime; // 剩余时间
      const percent = (useTime / disinfectTime) * 100; // 使用时间占比
      if (useTime >= disinfectTime) {
        storeApp.setProgress({
          startOrder: true, // 开始订单
          completeOrder: false,
          step: 1, // 第一步
          allTime: disinfectTime, // 总时间this.detail.time
          currentTime: 0, // 当前剩余时间this.detail.time
          modelVale: 100, // 当前进度值
          target: 100, // 当前进度环
          status: "success",
          statusText: "消毒完成",
        });
      }
    } else if (useStatus == 1) {
      // 当前状态洗头
      const currentTime1 = Number(new Date().getTime());
      const _startTime = Number(new Date(startTime).getTime());
      // const packageTime = time * 60;
      const packageTime = secTime
      const useTime = Math.floor((currentTime1 - _startTime) / 1000);
      const residueTime = packageTime - useTime;
      const percent = (useTime / packageTime) * 100;
      if (useTime >= packageTime) {
        storeApp.setProgress({
          startOrder: false,
          completeOrder: true,
          step: 2, // 第一步
          allTime: packageTime, // 总时间this.detail.time
          currentTime: 0, // 当前剩余时间this.detail.time
          modelVale: 100, // 当前进度值
          target: 100, // 当前进度环
          status: "success",
          statusText: "洗发完成",
        });
      } else {
        storeApp.setProgress({
          startOrder: true, // 开始订单
          completeOrder: false,
          step: 2, // 第一步
          allTime: packageTime, // 总时间this.detail.time
          currentTime: residueTime, // 当前剩余时间this.detail.time
          modelVale: percent, // 当前进度值
          target: percent, // 当前进度环
          status: "loading",
          statusText: "洗头中",
        });
        let timer = setInterval(() => {
          let curTime = currentTime.value - 1;
          storeApp.setProgress({
            currentTime: curTime,
          });
          computedTime();
          if (step.value == 2 && currentTime.value == 0) {
            storeApp.setProgress({
              startOrder: false,
              completeOrder: false,
              completeOrder: true,
              step: 2, // 第一步
              allTime: packageTime, // 总时间this.detail.time
              currentTime: 0, // 当前剩余时间this.detail.time
              modelVale: 100, // 当前进度值
              target: 100, // 当前进度环
              status: "success",
              statusText: "洗发完成",
            });
            // 更新订单状态
            updateStatus()
            clearInterval(timer);
            timer = null;
          }
        }, 1000);
        storeApp.setTimer(timer);
      }
    }
  })
}

function getList() {
  postBannerList({
    current: 1,
    size: 100,
  }).then((data) => {
    list.value = data;
    console.log("this.list", this.list);
  });
}
function computedTime() {
  const usePercent =
    ((Number(allTime.value) - Number(currentTime.value)) /
      Number(allTime.value)) *
    100;

  storeApp.setProgress({
    modelVale: usePercent,
    target: usePercent,
  });
  // if (usePercent == 100) {
  //   if (this.step == 2) {
  //     uni.showToast({
  //       icon: "none",
  //       title: "当前套餐使用完毕",
  //     });
  //     this.setOrderStatus({
  //       startOrder: false,
  //       completeOrder: true,
  //     });
  //     return;
  //   }
  // }
}
// 开始洗头
// function startUse(time = 1000) {
//   let startDisinfect = Number(new Date().getTime());
//   // 点击设备启动
//   storeApp.setStep(2);
//   storeApp.setProgress({
//     allTime: time, // 总时间
//     timeData: {},
//     currentTime: time, // 当前剩余时间
//     modelVale: 0, // 当前进度值
//     target: 0, // 当前进度环
//   });

//   let timer = setInterval(() => {
//     const currentTime1 = Number(new Date().getTime()); // 当前时间戳
//     const _startTime = Number(new Date(startDisinfect).getTime()); // 开始时间戳
//     const useTime = Math.floor((currentTime1 - _startTime) / 1000); // 使用时间
//     const residueTime = time - useTime; // 剩余时间
//     const percent = (useTime / time) * 100; // 使用时间占比
//     let curTime = currentTime.value - 1;
//     storeApp.setProgress({
//       step: 2,
//       //   currentTime: curTime,
//       allTime: time, // 总时间this.detail.time
//       currentTime: residueTime, // 当前剩余时间this.detail.time
//       modelVale: percent, // 当前进度值
//       target: percent, // 当前进度环
//     });
//     console.log("obj---", storeApp.obj);
//     // this.formatTime = getTime(currentTime.value);

//     if (step.value == 2 && currentTime.value == 0) {
//       clearInterval(timer);
//       timer = null;
//     }

//     // storeApp.setTimer(timer);
//   }, 1000);
// }
function toMine() {
  console.log("跳转各人中心");
  uni.switchTab({
    url: "/pages/mine/index",
  });
}
const updateStatus = async () => {
  let useStatus = detail.value?.useStatus;
  if (target.value == 100) {
    if (useStatus == 0) {
      console.log('进入消毒状态');
      const { startDisinfect, startTime, time, disinfectTime } = detail.value;
      const currentTime1 = Number(new Date().getTime()); // 当前时间戳
      const _startTime = Number(new Date(startDisinfect).getTime()); // xd开始时间戳
      const useTime = Math.floor((currentTime1 - _startTime) / 1000); // 使用时间
      // if (useTime > disinfectTime + 10) {
      //   await getUpdateDetail();
      // }

      if (!xdTimer) {
        xdTimer = setInterval(async () => {
          console.log('进入消毒定时器');
          if (detail.value?.useStatus != 0 || (detail.value?.status == 1 || detail.value?.status == 2)) {
            clearInterval(xdTimer);
            xdTimer = null;
          } else {
            if (!isRequesting) {
              isRequesting = true;
              await getUpdateDetail();
              isRequesting = false;
            }
          }
        }, 5000);
      }
    } else if (useStatus == 1) {
      const { startDisinfect, startTime, endTime, status } = detail.value;
      const currentTime2 = Number(new Date().getTime()); // 当前时间戳
      const _startTime = Number(new Date(startDisinfect).getTime()); // xt开始时间戳
      const useTime = Math.floor((currentTime2 - _startTime) / 1000); // 使用时间
      // if (useTime > time * 60 + 10) {
      //   await getUpdateDetail();
      // }

      if (!xtTimer) {
        console.log('进入洗头定时器');
        xtTimer = setInterval(async () => {
          if (detail.value?.useStatus == 1 && detail.value?.endTime || (detail.value?.status == 1 || detail.value?.status == 2)) {
            clearInterval(xtTimer);
            xtTimer = null;
          } else {
            if (!isRequesting) {
              isRequesting = true;
              await getUpdateDetail();
              isRequesting = false;
            }
          }
        }, 5000);
      }

    }
  }
}
onLoad((options) => {
  orderId.value = options.orderId
})
onShow(async () => {
  // const pages = getCurrentPages(); //获取应用页面栈
  // const { orderId: id } = pages[pages.length - 1].options; //获取页面传递的信息
  // console.log("orderId", orderId);
  // orderId.value = id;
  // getList();
  // 调取接口
  await getPackageDetail();

  init();



  // 测试
  // storeApp.setProgress({
  //   startOrder: true, // 开始订单
  //   step: 2, // 第一步
  //   allTime: 100, // 总时间this.detail.time
  //   currentTime: 100, // 当前剩余时间this.detail.time
  //   modelVale: 10, // 当前进度值
  //   target: 100, // 当前进度环
  //   status: "loading",
  //   statusText: "洗头中",
  // });

  // storeApp.setProgress({
  //   startOrder: true, // 开始订单
  //   step: 2, // 第一步
  //   allTime: 100, // 总时间this.detail.time
  //   currentTime: 100, // 当前剩余时间this.detail.time
  //   modelVale: 10, // 当前进度值
  //   target: 100, // 当前进度环
  //   completeOrder: true,
  //   status: "success",
  //   statusText: "洗头完成",
  // });
});

onUnload(() => {
  if (xdTimer) {
    clearInterval(xdTimer)
    xdTimer = null
  }
  if (xtTimer) {
    clearInterval(xtTimer)
    xtTimer = null
  }
})
</script>

<style scoped lang="scss">
.view-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  padding: 8px 16px;
  box-sizing: border-box;
  background: #f8f8f8;
  > view {
    flex: 1;
    overflow-y: auto;
  }
  .indicator {
    width: 100%;
    // height: 300px;
  }

  .circle-box {
    width: 220px;
    height: 220px;
    border: 2px dashed #27ab9c;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 30px auto;
    position: relative;
    .circle {
      position: absolute;
      left: 50%;
      top: calc(50% - 5px);
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      // position: relative;
    }
    .circle-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .active-circle {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 15px solid #27ab9c;
    }
  }
  .card-item {
    // height: 100px;
    background: #fff;
    padding: 15px 10px;
    border: 1rpx solid #ececec;
    box-shadow: 0 0 10px #e9e9e9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;

    .lf-icon {
      width: 50px;
      height: 50px;
      margin-right: 20rpx;
    }
    .tj-icon {
      position: absolute;
      right: 0;
      top: 0;
      width: 35px;
      height: 35px;
    }
    .msg {
      flex: 1;
    }
    .head {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    .name {
      font-size: 18px;
      font-weight: 600;
      margin-right: 15px;
    }
    .intro {
      font-size: 14px;
      color: #a2a2a2;
    }
    .duration {
      padding: 6rpx 14rpx;
      background: rgba(39, 171, 156, 0.24);
      font-weight: 600;
      font-size: 26rpx;
      color: #27ab9c;
      border-radius: 8rpx;
    }
  }

  .complete-box {
    position: absolute;
    left: 50%;
    top: calc(50% - 5px);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 600;
    .icon {
      width: 60px;
      height: 45px;
      margin-bottom: 5px;
    }
  }
  .tip-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .tip-msg {
    font-size: 13px;
    color: #848484;
    letter-spacing: 1px;
  }

  .btn {
    height: 88rpx;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 600;
    background: #27ab9c;
    text-align: center;
    line-height: 88rpx;
    border-radius: 44rpx;
    width: 100%;
    flex: none;
    margin-top: 82rpx;
    color: #fff;
    font-weight: 600;
    font-size: 36rpx;
    color: #ffffff;
  }
}
</style>
